<template>
  <a-modal
    width="600px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="close" title="公共服务场所详情"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <div class="infobox" v-if="data">
        <div class="infobox_title">{{ data.ggfw_name }}</div>
        <div class="infobox_content">{{ data.janjie }}</div>
        <div style="display: flex; padding: 10px 0">
          <div style="width: 150px">
            <div style="font-size: 10px">联系电话</div>
            <div style="font-size: 13px">{{ data.phone }}</div>
          </div>
          <div style="flex: 1">
            <div style="font-size: 10px">服务地址</div>
            <div style="font-size: 13px">{{ data.address }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="infobox" style="margin: 10px 0;">
          <div style="display: flex; padding:0px 0;">
              <div style="flex:1;">
                <div style="font-size: 10px;">所属网格</div>
                <div style="font-size: 13px;">望江山网格</div>
              </div>
              <div style="width:100px;">
                <div style="font-size: 10px;">网格长</div>
                <div style="font-size: 13px;">张三</div>
              </div>
              <div style="width: 100px;">
                <div style="font-size: 10px;">联系电话</div>
                <div style="font-size: 13px;">18275346457</div>
              </div>
              <div style="width: 150px; display:flex; align-items:center;justify-content: center;">
                <div class="btn" @click="xfrw">下发任务</div>
              </div>
            </div>
        </div> -->
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
const data = ref(null)
const modalShow = ref(false)

const emit = defineEmits(["xfrw"])
const xfrw = () => {
  emit("xfrw")
}

const close = () => {
  modalShow.value = false
}
const show = (e) => {
  data.value = e
  modalShow.value = true
}
defineExpose({ show, close })
</script>
<style scoped>
.infobox {
  background: #4ddecf1a;
  padding: 10px 16px;
  border: 1px solid #4ddecf33;
  border-radius: 10px;
  color: #ffffff;

  .infobox_title {
    color: #d5f2ff;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .infobox_content {
    font-size: 12px;
    padding: 10px 0;
    border-bottom: 2px solid #4ddecf40;
  }
  .btn {
    background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
    border: 1px solid #57ffff;
    color: #ffffff;
    font-size: 10px;
    padding: 3px 15px;
    border-radius: 99px;
    cursor: pointer;
  }
}
</style>
